<template>
	<div class="item">
		<div class="value">{{value}}
			<div class="unit">{{unit}}</div>
		</div>
		<div class="label">{{label}}</div>
	</div>
</template>

<script>
	export default{
		props:["value","label","unit"]
	}
</script>

<style lang="less">
	.item{
		width: 33%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin: 30rpx 0;
		.value{
			font-weight: bold;
			font-size: 50rpx;
			display: flex;
			align-items: flex-end;
		}
		.unit{
			color:#9E9E9E;
			font-size: 24rpx;
			margin-bottom: 8rpx;
			margin-left: 8rpx;
		}
		.label{
			font-size: 22rpx;
			color: #9E9E9E;
			margin-top: 16rpx;
		}
	}
</style>